<%--
  Created by IntelliJ IDEA.
  User: 13095
  Date: 2024/11/1
  Time: 21:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<html>
<head>
    <title>修改个人信息</title>
    <jsp:include page="inc/inc.jsp"></jsp:include>
</head>
<body>
<header id="site-header" class="fixed-top">
    <section class="w3l-header-4">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light">
                <h1><a class="navbar-brand" href="${path}/user/index">
                    <span>跑腿平台</span>
                </a></h1>
                <button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
                        data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="fa icon-expand fa-bars"></span>
                    <span class="fa icon-close fa-times"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav mx-lg-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="${path}/user/index">首页 </a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link" href="${path}/user/createTask">发起任务</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="${path}/user/historyOrders">我的订单</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="${path}/user/wallet">钱包</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="${path}/user/myAddress">地址管理</a>
                        </li>
                        <li class="nav-item" >
                            <a class="nav-link" href="${path}/user/reviewList">我的评价</a>
                        </li>
                        <li class="nav-item" onclick="logOut()"><a class="nav-link">退出登录</a> </li>
                    </ul>
                    <ul class="navbar-nav search-right mt-lg-0 mt-2">

                         <li class="nav-item"><a href="${path}/user/updateUserInfo"
                                                class="btn btn-primary btn-style d-none d-lg-block btn-style mr-2"><span
                                class="fa fa-phone mr-3" aria-hidden="true"></span>  ${sessionScope.user.phone_number}</a>
                        </li>
                    </ul>

                    <!-- search popup -->
                    <div id="search" class="pop-overlay">
                        <div class="popup">
                            <form action="#" method="GET" class="d-sm-flex">
                                <input type="search" placeholder="Search.." name="search" required="required"
                                       autofocus>
                                <button type="submit">Search</button>
                                <a class="close" href="#url">&times;</a>
                            </form>
                        </div>
                    </div>
                    <!-- /search popup -->
                </div>
                <!-- toggle switch for light and dark theme -->
                <div class="mobile-position">
                    <nav class="navigation">
                        <div class="theme-switch-wrapper">
                            <label class="theme-switch" for="checkbox">
                                <input type="checkbox" id="checkbox">
                                <div class="mode-container">
                                    <i class="gg-sun"></i>
                                    <i class="gg-moon"></i>
                                </div>
                            </label>
                        </div>
                    </nav>
                </div>
            </nav>
        </div>
    </section>
</header>

<!-- about breadcrumb -->
<section class="w3l-about-breadcrumb text-left">
    <div class="breadcrumb-bg breadcrumb-bg-about py-3">
        <div class="container grid-breadcrumb">
            <ul class="breadcrumbs-custom-path mt-md-2">
                <li><a href="${path}/user/index">主页</a></li>
                <li class="active"><span class="fa fa-angle-double-right mx-2" aria-hidden="true"></span>个人信息修改
                </li>
            </ul>
        </div>
    </div>
</section>
<section class="w3l-contact-11 py-5" id="contact">
    <div class="contacts-main py-lg-5 py-md-4">
        <div class="contant11-top-bg">
            <div class="container">
                <span class="subhny-title text-center mb-2">个人信息</span>
                <h3 class="hny-title text-center mb-md-5 mb-4">个人信息修改</h3>
                <div class="d-grid contact section-gap">
                    <div class="contact-info-left d-grid text-center">
                        <div class="contact-info">
                            <span class="fa fa-phone" aria-hidden="true"></span>
                            <h4>Phone</h4>
                            <p><a href="tel:+44 7834 857829">+86 ${sessionScope.user.phone_number}</a></p>

                        </div>
                        <div class="contact-info">
                            <span class="fa fa-envelope" aria-hidden="true"></span>
                            <h4>Email</h4>
                            <p><a href="mailto:mail@example.com" class="email">example@qq.com</a></p>
                            <p><a href="mailto:mail@example1.com" class="email">example@163.com</a></p>
                        </div>
                        <div class="contact-info">
                            <span class="fa fa-clock-o" aria-hidden="true"></span>
                            <h4>工作时间</h4>
                            <p>全年</p>
                            <p>无休</p>
                        </div>
                        <div class="contact-info">
                            <span class="fa fa-map-marker" aria-hidden="true"></span>
                            <h4>Location</h4>
                            <p>百度地图</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="form-41-mian mt-5 pt-lg-5 pt-md-4">
            <div class="container">

                <div class="form-inner-cont">
                    <form action="${path}/user/updateUserInfo" method="post">
                <div class="form-input">
                        <label>用户名:</label>
                        <input type="text" name="username"  placeholder="请输入用户名" maxlength="15" id="usernameInput"  class="contact-input">
                        <span id="usernameError" class="error"></span>
                </div>
                        <div class="form-input">
                        <label>手机号:</label>
                        <input type="text" name="phone_number"  placeholder="请输入手机号" maxlength="15"  class="contact-input" id="phoneInput">
                        <span id="phoneError" class="error" style="color: red"></span>
                        </div>
                        <div class="form-input">
                        <label>密码:</label>
                        <input type="password" name="password"  placeholder="请输入密码" maxlength="255"  class="contact-input" id="passwordInput">
                        <span id="passwordError" class="error"></span>
                        </div>
                        <div class="form-input">
                        <label>邮箱:</label>
                        <input type="email" name="email" placeholder="请输入邮箱"   class="contact-input" maxlength="100" id="emailInput">
                        <span id="emailError" class="error"></span>
                        </div>
                        <div class="submit text-right">
                            <button type="submit" class="btn btn-primary btn-style">修改</button>
                        </div>
                    </form>


                </div>
                <div style="width:100%;height:300px;" id="mapDiv">
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /contact1 -->
<!-- footer-28 block -->
<jsp:include page="inc/footer.jsp"></jsp:include>

<script>
    $(document).ready(function () {
        // 用户名验证
        $('#usernameInput').on('input', function () {
            var username = $(this).val();
            if ((username.length < 3 || username.length > 15)&&username.length!=0) {
                $('#usernameError').text('用户名长度应在 3 到 15 个字符之间');
            } else {
                $('#usernameError').text('');
            }
        });

        // 手机号验证
        $('#phoneInput').on('input', function () {
            var phoneNumber = $(this).val();
            var phoneRegex = /^1[3-9]\d{9}$/;
            if ((!phoneRegex.test(phoneNumber))&&(phoneNumber.length!=0)) {
                $('#phoneError').text('请输入有效的手机号码');
            } else {
                $('#phoneError').text('');
            }
        });

        // 密码验证
        $('#passwordInput').on('input', function () {
            var password = $(this).val();
            if ((password.length < 6 || password.length > 20)&&password.length!=0) {
                $('#passwordError').text('密码长度应在 6 到 20 个字符之间');
            } else {
                $('#passwordError').text('');
            }
        });

        // 邮箱验证
        $('#emailInput').on('input', function () {
            var email = $(this).val();
            var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if ((email!== '' &&!emailRegex.test(email))&&email.length!=0) {
                $('#emailError').text('请输入有效的邮箱地址');
            } else {
                $('#emailError').text('');
            }
        });

        // 表单提交验证
        $('#registrationForm').submit(function (e) {
            var usernameError = $('#usernameError').text();
            var phoneError = $('#phoneError').text();
            var passwordError = $('#passwordError').text();
            var emailError = $('#emailError').text();

            if (usernameError!== '' || phoneError!== '' || passwordError!== '' || emailError!== '') {
                e.preventDefault();
                return false;
            }
            return true;
        });
    });
</script>
<style>
    .error{
        color: red;
    }
</style>
</body>
</html>
